<template>
<div>


<div>
 <el-row>
    <el-col :span="24">
      <div style="float:left">
           <img :src="bookImg" style="width:35px;height:20px">
            <span>体系课程:</span>
            <el-link type="danger" @click="select(0)">全部</el-link>
            <el-link type="primary" @click="select(1)">物联网</el-link>
            <el-link type="success"@click="select(2)">传媒</el-link>
            <el-link type="warning"@click="select(3)" >网站</el-link>
      </div>
  </el-col>
  <el-col :span="6" v-for="(o, index) in currentDate" :key="o.id" :offset="1" style="width:250px;height:250px">
    <el-card :body-style="{ padding: '0px' }">
      <img  src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"   class="image" width="150px" height="150">
      <div style="padding: 14px;">
        <div>
            <span>{{o.courseName  }}</span>
        </div>
        <div class="bottom clearfix">
             <span style="color:red">💴{{o.price }}元</span>
        </div>
        <div>
              <el-button  @click="Tz(o.id)" class="button">商品详情</el-button>
        </div>
      </div>
    </el-card>
  </el-col>
</el-row>
</div>
</div>
</template>
<style>
  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after { 
      content: "";
  }
  
  .clearfix:after {
      clear: both
      
  }
  
</style>

<script>
export default {
  data() {
    return {
      currentDate:{
          state:1,
      },
         bookImg: require('@/assets/logo.png'),
     
    };
    
  },
  
  created:function()
  {
      this.axios.get('https://localhost:44392/api/app/i-bUssin-vur/show2').then(x=>{
                    
                    this.currentDate=x.data
      })
  },
  methods:{
      
        Tz:function(id)
        {
           this.$router.push({name:"CourseDetail",query:{id:id}});
        },
        select:function(state)
        {       
                    console.log(state);
                    this.axios.get('https://localhost:44392/api/app/i-bUssin-vur/show2?state='+state).then(x=>{
                    
                    this.currentDate=x.data
         })
        }

  }
}
</script>